<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Identifier-first Login</title>

    <!-- CSS -->
    <link rel="stylesheet" th:href="@{../assets/material/material.blue_grey-blue.min.css}">
    <link rel="stylesheet" th:href="@{../assets/material/material.icons.css}">
    <link rel="stylesheet" th:href="@{../assets/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{../assets/css/login.css}">

    <!-- Favicon and touch icons -->
    <link rel="shortcut icon" th:href="@{../assets/ico/favicon.ico}">

    <script th:if="${bot_detection_plugin == 'google-recaptcha-v3-am-bot-detection'}" th:src="${'https://www.google.com/recaptcha/api.js?render=' + bot_detection_configuration.siteKey}"></script>

</head>

<body>
<div class="mdl-layout mdl-js-layout">
    <div class="login-container">
        <div class="login-form">
            <div class="login-form-title">
                <label>Sign in</label>
                <span>to continue to <span th:text="${domain.name}"></span></span>
            </div>
            <form id="form" role="form" th:action="${action}" method="get">
                <div class="login-form-content">
                    <div class="input-textfield">
                        <label for="username">Username</label>
                        <input type="text" id="username" name="username" autofocus="autofocus" required />
                    </div>
                    <div th:if="${error}" class="login-error-info">
                            <span>
                                <span class="error" th:text="${error}"></span>
                                <small class="error_description" th:text="*{error_description}?: 'Wrong user or password'"></small>
                            </span>
                    </div>
                </div>

                <input type="hidden" th:name="response_type" th:value="${param.response_type}"/>
                <input type="hidden" th:name="redirect_uri" th:value="${param.redirect_uri}"/>
                <input type="hidden" th:name="client_id" th:value="${param.client_id}"/>

                <input type="hidden" th:if="${bot_detection_plugin == 'google-recaptcha-v3-am-bot-detection'}"
                       th:id="${bot_detection_configuration.get('tokenParameterName')}"
                       th:name="${bot_detection_configuration.get('tokenParameterName')}" />

                <div class="login-form-actions">
                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Sign in</button>
                </div>
                <div class="login-form-additional-actions">
                    <div th:if="${allowRegister}">
                        <a th:href="${registerAction}">No account ? Register</a>
                    </div>
                    <div  th:if="${allowPasswordless}">
                        <a th:href="${passwordlessAction}">Sign in with fingerprint, device or security key</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!--[if lt IE 10]>
<script th:src="@{../assets/js/placeholder.js}"></script>
<![endif]-->
<script th:src="@{../assets/material/material.min.js}"></script>
<script th:src="@{../assets/js/jquery-3.5.1.min.js}"></script>
<script th:inline="javascript">
    $(".mdl-textfield__input").focus(function (){
        if( !this.value ){
            $(this).prop('required', true);
            $(this).parent().addClass('is-invalid');
        }
    });

    $(".mdl-button").filter(":button").click(function (event){
        /*[# th:if="${bot_detection_plugin == 'google-recaptcha-v3-am-bot-detection'}"]*/
        event.preventDefault();
        grecaptcha.ready(function() {
            grecaptcha.execute(/*[[${bot_detection_configuration.siteKey}]]*/, {action: 'submit'}).then(function(token) {
                $("#"+ /*[[${bot_detection_configuration.get('tokenParameterName')}]]*/ "no-name").val(token);
                $("#form").unbind('submit').submit();
            });
        });
        /*[/]*/

        $(this).siblings(".mdl-textfield").addClass('is-invalid');
        $(this).siblings(".mdl-textfield").children(".mdl-textfield__input").prop('required', true);
    });
</script>
</body>
</html>
